<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>聚合页面管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <div class="search-container">
          <el-form class="search-form" :model="form" ref="form" label-width="90px" label-position="right" inline>
            <el-row>
              <el-form-item label="关键词名称" prop="majorWord">
                <el-input v-model="form.majorWord"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select v-model="form.status">
                  <el-option value="1" label="草稿"></el-option>
                  <el-option value="2" label="已发布"></el-option>
                  <el-option value="3" label="下线"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">重置</el-button>
              </el-form-item>
            </el-row>
            <!-- <el-row style="margin-left:20px">
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">重置</el-button>
              </el-form-item>
            </el-row> -->
          </el-form>
        </div>
        <div class="mt-20">
          <el-button type="primary" @click="onAdd"><i class="el-icon-plus"></i><span id="add_button">新增关键词</span></el-button>
          <!--
          <el-button type="success" disabled><i class="el-icon-upload2"></i> 批量上线</el-button>
          <el-button type="warning" disabled><i class="el-icon-download"></i> 批量下线</el-button>
          <el-button type="danger" @click="onRemove" disabled><i class="el-icon-delete"></i> 批量删除</el-button>
          -->
        </div>
        <div class="mt-20">
          <el-table :data="data" @sort-change="sortChange" v-loading="loading">
            <!-- <el-table-column type="selection" width="55" fixed>
            </el-table-column> -->
            <el-table-column prop="majorWord" label="关键词" min-width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1">草稿</span>
                <span v-if="scope.row.status == 2">已发布</span>
                <span v-if="scope.row.status == 3">下线</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="articleLink" label="链接地址" min-width="120" show-overflow-tooltip>
            </el-table-column> -->
            <el-table-column prop="publishDate" label="发布时间" min-width="170" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.publishDate">{{$utils.dateFormat(new Date(scope.row.publishDate), 'yyyy-MM-dd hh:mm:ss')}}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="encryptId" label="加密ID" min-width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="sort" label="排序" sortable="custom" min-width="70">
              <template slot-scope="scope">
                <span>{{(scope.row.sort != 0 && (scope.row.sort == '' || scope.row.sort == null)) ? '--' : scope.row.sort}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作"  width="270" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.status != 2" @click="changeStatus(scope.row.id, 2)">上线</el-button>
                <el-button type="text" v-if="scope.row.status == 2" @click="changeStatus(scope.row.id, 3)">下线</el-button>
                <el-button type="text" v-if="type == 3 && scope.row.isSupportSignUp == 1" @click="goActivity(scope.row.advertId)">报名情况</el-button>
                <el-button type="text" @click="goDetail(scope.row.encryptId)">详情</el-button>
                <el-button type="text" @click="doEdit(scope.row.encryptId)">修改</el-button>
                <el-button type="dangertext" @click="doDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt-10 t-right" v-if="total > 0">
          <el-pagination
            background
            :current-page="currentPage"
            :total="total"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >
          </el-pagination>
        </div>
      </div>
    </div>
    <m-activity :visible.sync="activityVisible" :advertId="advertId" v-if="advertId" @close="closeDialog"></m-activity>
  </div>
</template>

<script>
// import MActivity from './activity'
  export default {
    // components: {
    //   MActivity
    // },
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        form: {},
        type: '1',
        sortType: '1',
        data: [],
        showTotal: false,
        total: 0,
        loading: false,
        visible: false,
        advertId: null,
        sortParam: {
          prop : "",
          order : ""
        },
        sort:''
      }
    },
    activated() {
      this.loadData()
    },
    created() {
      this.loadData()
    },
    methods: {
      sortChange(column,prop,order){
        if(column.prop == null || column.order == null){
          this.sortParam.prop = "";
          this.sortParam.order = "";
        }else{
          this.sortParam.prop = column.prop;
          this.sortParam.order = column.order;
        }
        this.loadData();
      },
      // getList() {
      //   this.loading = true;
      //   const params ={
      //     ...this.form,
      //     type: this.type,
      //     currentPage: this.currentPage,
      //     pageSize: this.pageSize,
      //     prop: this.sortParam.prop,
      //     order: this.sortParam.order
      //   }

      //   this.$api.advert.getList(params).then(res => {
      //     if(res.success){
      //       this.data = res.data.list
      //       this.total = res.data.total
      //       this.loading = false
      //     }
      //   })
      // },
      handleClick(val) {
        if(this.type == 1){
          document.getElementById('add_button').innerText = "新增首页轮播";
        }else if(this.type == 2){
          document.getElementById('add_button').innerText = "新增热点资讯";
        }else if(this.type == 3){
          document.getElementById('add_button').innerText = "新增最新活动";
        }else if(this.type == 4){
          document.getElementById('add_button').innerText = "新增营销知识";
        }
        this.loadData()
      },
      loadData() { 
        this.loading = true
        const params ={
          ...this.form,
          type: this.type,
          sortType: this.sortType,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          prop: this.sortParam.prop,
          order: this.sortParam.order
        }
        this.$api.aggregation.selectByPage(params).then(res => {
          if(res.success){
            this.data = res.data.list
            this.total = res.data.total
            this.sort=Number(res.data.list[0].sort) + 1
            this.loading = false
          }
        })
      },
      onSearch() {
        this.currentPage = 1
        this.loadData()
      },
      onReset() {
        this.$refs.form.resetFields()
        this.currentPage = 1
        this.loadData()
      },
      onAdd() {
        this.$router.push({
          path:'/aggregate/add',
          query:{sort:this.sort}
          })
      },
      onRemove() {
        
      },
      // 修改
      doEdit(id) {
        this.$router.push('/aggregate/edit/' + id)
        // this.$router.push('/aggregate/edit')
      },
      goDetail(id) {
        this.$router.push('/aggregate/detail/' + id)
        // this.$router.push('/aggregate/detail')
      },
      goActivity(id) {
        this.advertId = id
        this.activityVisible = true
      },
      closeDialog() {
        this.visible = false
        this.advertId = null
      },
      // 删除
      doDelete(id) {
        this.$confirm('删除后不可还原，确认删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$api.aggregation.delete({'id':id}).then(res => {
            if(res.success) {
              this.$message.success('已删除')
              this.currentPage = 1
              this.loadData()
            }
          })
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.loadData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.loadData()
      },
      changeStatus(id, status){
        const params = {
          id: id,
          status: status
        }
        this.$api.aggregation.update(params).then(res => {
          if(res.success){
            this.$message.success('修改成功')
            this.currentPage = 1;
            this.loadData();
          }
        })
      }
    }
  }
</script>
